<template>
  <div id="meta2d"></div>
</template>

<script lang="ts" setup>
import { getCurrentInstance,onMounted, onUnmounted } from 'vue';
import { flowPens, flowAnchors } from "@meta2d/flow-diagram";
import { activityDiagram, activityDiagramByCtx } from "@meta2d/activity-diagram";
import { classPens } from "@meta2d/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
import { register as registerEcharts } from '@meta2d/chart-diagram';
import { formPens } from "@meta2d/form-diagram";
import { chartsPens } from '@meta2d/le5le-charts';
import { ftaPens, ftaPensbyCtx, ftaAnchors } from "@meta2d/fta-diagram";
import { Meta2d, Pen, register, registerAnchors, registerCanvasDraw } from '@meta2d/core';


// import { removeOriginalData } from "@/utils/meta-storage";
// import "@/assets/    s/rg.js";
// import { MetaPlugin } from "../utils/plugin";
// import { useSelection } from "../services/selections";
// import { storeToRefs } from 'pinia';
// import { useCanvasStore } from '../store/canvas';

// const canvasStore = useCanvasStore();
// const { meta2dDatas } = storeToRefs(canvasStore);

import { useSelection } from '../services/selections';
const { select } = useSelection();

// onMounted(() => {
//   // 创建实例
//   // new Meta2d('meta2d', meta2dOptions);
//   new Meta2d('meta2d')

//   // 按需注册图形库
//   // 以下为自带基础图形库
//   register(flowPens());
//   registerAnchors(flowAnchors());
//   register(activityDiagram());
//   registerCanvasDraw(activityDiagramByCtx());
//   register(classPens());
//   register(sequencePens());
//   registerCanvasDraw(sequencePensbyCtx());
//   registerEcharts();
//   registerCanvasDraw(formPens());
//   registerCanvasDraw(chartsPens());
//   register(ftaPens());
//   registerCanvasDraw(ftaPensbyCtx());
//   registerAnchors(ftaAnchors());


//   // 注册其他自定义图形库
//   // ...
//   // const pen = {
//   //   name: 'a-shouchekaiguanhe--_huaban1',
//   //   x: 100,
//   //   y: 100,
//   //   width: 20,
//   //   height: 20,
//   //   iconFamily: 'sgcc', // 必须正确设置，具体参考每个字体图标的项目设置
//   //   // iconSize: 20, // 缺省自适应
//   //   // iconColor: 'green', // 可缺省
//   //   icon: '\uea23', // 字体图标Unicode编码。必须正确设置，具体参考下面文档
//   // };
//   // meta2d.addPen(pen);
//   // meta2d.inactive();

//   // 读取本地存储
//   // let data: any = localStorage.getItem('meta2d');
//   let data: any = meta2dDatas.value;

//   if (data) {
//     // data = JSON.parse(data);
//     // 判断是否为运行查看，是-设置为预览模式
//     if (location.pathname === '/preview') {
//       data.locked = 1;
//     } else {
//       data.locked = 0;
//     }
//     meta2d.open(data);
//   }

//   meta2d.on('active', active);
//   meta2d.on('inactive', inactive);
// });

// const active = (pens?: Pen[]) => {    
//   select(pens);
// };
  
// const inactive = () => {
//   select();
// };

// onUnmounted(() => {
//   meta2d.destroy();
// }); 


onMounted(() => {
  const meta2dOptions: any = {
    background: "transparent",
  };
  if (window.location.pathname.indexOf("preview") !== -1) {
    meta2dOptions["rule"] = false;
  } else {
    meta2dOptions["rule"] = true;
  }
  let meta2d = new Meta2d("meta2d", meta2dOptions);

  // 按需注册图形库，以下为自带基础图形库
  register(flowPens());
  registerAnchors(flowAnchors());
  register(activityDiagram());
  registerCanvasDraw(activityDiagramByCtx());
  register(classPens());
  register(sequencePens());
  registerCanvasDraw(sequencePensbyCtx());
  registerCanvasDraw(formPens());
  // registerCanvasDraw(chartsPens());
  register(ftaPens());
  registerCanvasDraw(ftaPensbyCtx());
  registerAnchors(ftaAnchors());


  // 读取本地存储
  let data: any = localStorage.getItem("meta2d");
  if (data) {
    data = JSON.parse(data);
    // 判断是否为运行查看，是-设置为预览模式
    if (!data.locked) {
      data["locked"] = 0;
    }
    meta2d.open(data);
  }

  // setTimeout(() => {
  //   if (window?.meta2dTools) {
  //     window?.registerToolsNew();
  //   }
  // }, 1000);

  meta2d.on("active", active);
  meta2d.on("inactive", inactive);
});

function active(pens?: Pen[]) {
  select(pens);
}

function inactive() {
  select();
}

onUnmounted(() => {
  meta2d.destroy();
  // 取消订阅
  meta2d.off("active", active);
  meta2d.off("inactive", inactive);
  // 删除原始数据
  // removeOriginalData();
});

</script>
<style lang="scss" scoped>
#meta2d {
  // z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.context-menu {  
  // position: absolute;  
  // top: var(--contextMenu-y, 0);  
  // left: var(--contextMenu-x, 0);  
  background-color: white;  
  border: 1px solid #ccc;  
  // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
  padding: 10px;  
  z-index: 1000; /* 确保弹窗在最上层 */  
  background-clip: padding-box;
  border-radius: 2px;  
  outline: none;
  box-shadow: 0 2px 8px #00000026;
  ul {
    min-width: 200px;
    position: relative;
    margin: 0;
    padding: 4px 0;
    text-align: left;          
    list-style-type: none;
    background-color: #fff;
    // background-clip: padding-box;
    // border-radius: 2px;
    // outline: none;
    // box-shadow: 0 2px 8px #00000026;
    -webkit-transform: translate3d(0, 0, 0);
    li {
      clear: both;
      margin: 0;
      padding: 5px 12px;
      color: #000000d9;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      white-space: nowrap;
      cursor: pointer;
      transition: all .3s;
    }
  }
}  
  
// .context-menu button {  
//   display: block;  
//   width: 100%;  
//   margin: 5px 0;  
//   padding: 5px;  
//   background-color: #eee;  
//   border: none;  
//   cursor: pointer;  
// }  
  
// .context-menu button:hover {  
//   background-color: #ddd;  
// }
</style>